<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>邀请明细</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        .page {
            max-width: 100%;
            height: 100%;
            font-size: 0;
            position: relative;
        }

        .page .head {
            width: 100%;
            height: 1rem;
            line-height: 1rem;
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: space-between;
            padding: 0 0.2rem;
            box-sizing: border-box;
            font-size: 0.16rem;
            color: #686868;
            z-index: 999;
        }

        .page .head div.one {
            text-align: left;
            width: 0.3rem;
        }

        .page .head div.one img {
            width: 100%;
        }

        .page .head div.two {
            font-size: 0.36rem;
            font-weight: bold;
            color: #111;
        }

        .page .content {
            width: 100%;
            position: absolute;
            top: 1rem;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #f3f3f3;
            overflow-y: scroll;
        }

        .page .content::-webkit-scrollbar {
            display: none;
        }

        .page .content .top {
            background-color: #fff;
        }

        .page .content .tab {
            display: flex;
            justify-content: space-between;
            padding: 0.2rem 0.2rem;
            box-sizing: border-box;
        }

        .page .content .tab span.spn {
            display: inline-block;
            font-size: 0.3rem;
            color: #999;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .page .content .tab span .active {
            width: 0.3rem;
            height: 0.08rem;
            background-color: #FE0364;
            border-radius: 0.1rem;
            margin-top: 0.08rem;

        }

        /* .page .content .top {
            padding-bottom: 0.5rem;
            box-sizing: border-box;
        } */

        .page .content .top .circle {
            width: 100%;
            text-align: center;
            position: relative;
            margin-bottom: 0.15rem;
        }

        .page .content .top .circle .cir_img {
            width: 4rem;
            height: 3.06rem;
            margin: 0 auto;
            margin-top: 0.3rem;
        }

        .page .content .top .circle .cir_img img {
            width: 100%;
        }

        .page .content .top .circle .cir_totle_con {
            width: 100%;
            color: #333;
            position: absolute;
            top: 1.5rem;

        }

        .page .content .top .circle .cir_totle_con p:nth-child(1) {
            font-size: 0.24rem;
        }

        .page .content .top .circle .cir_totle_con p:nth-child(2) {
            font-size: 0.66rem;
            font-weight: bold;
        }

        .page .content .top .cir_totle_money {
            width: 5rem;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .page .content .top .cir_totle_money .cir_totle_type {
            color: #333;
            font-size: 0.24rem;
            text-align: center;
        }

        .page .content .top .cir_totle_money .line {
            width: 1px;
            background-color: #999;
            height: 0.3rem;
        }

        .page .content .top .cir_totle_money .cir_totle_type .money {
            font-size: 0.44rem;
            font-weight: bold;
        }

        .page .content .bottom {
            margin-top: 0.2rem;
            background-color: #fff;
            position: absolute;
            left:0;
            right:0;
            top:5.3rem;

        }

        .page .content .bottom .tab_type {
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #999;
            align-items: center;
        }

        .page .content .bottom .tab_type span {
            display: inline-block;
            padding: 0.35rem 0;
            box-sizing: border-box;
            font-size: 0.26rem;
            color: #333;
            width: 33.3%;
            text-align: center;
        }
        .page .content .bottom .tab_type span .line{
            
            height: 0.2rem;
            width: 1px;
            color:red;
            background-color: red;
        }
        .page .content .bottom ul>li{
            font-size: 0.24rem;
            color:#666; 
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding:0.2rem 0;
            box-sizing: border-box;
        }
        .page .content .bottom ul>li span{
            display: inline-block;
            width: 33.3%;
            text-align: center;
            overflow: hidden;    
            text-overflow:ellipsis;    
            white-space: nowrap;
        }
        .page .content .bottom .nodata{
           text-align: center;
            margin-top:1.5rem;
        }
        .page .content .bottom .nodata img{
            width: 1.72rem;
            height: 1.72rem;
            margin: 0 auto;
        }
        .page .content .bottom .nodata p{
            font-size: 0.24rem;
            color:#999;
        }
        /* 奖励明细样式 */
        .page .reward_content{
            width: 100%;
           
        }
        .page .reward_content .rew_one{
            display: flex;
            justify-content: space-between;
            padding:0.2rem;
            box-sizing: border-box;
            font-size: 0.24rem;
            color:#666;
            align-items:flex-end;
        }
        .page .reward_content .rew_one img{
            width: 0.57rem;
            height: 0.57rem;
        }
        .page .reward_content ul{
            background-color: #fff;
        }
        .page .reward_content ul li{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.2rem;
            box-sizing: border-box;
            border-bottom: 1px solid #eee;
        }
        .page .reward_content ul li .left p:nth-child(1){
            font-size: 0.3rem;
            color:#000;
            font-weight: bold;
        }
        .page .reward_content ul li .left p:nth-child(2){
            font-size: 0.24rem;
            color:#666;
        }
        .page .reward_content ul li .right{
            font-size: 0.3rem;
            color:#000;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="head">
            <div class="one">
                <span><img src="./img/left_arrow.png" alt=""></span>
            </div>
            <div class="two">邀请明细</div>
            <div></div>
        </div>
        <div class="content">
            <div class="top">
                <div class="tab">
                    <span class="spn" >奖励明细<span class="active"></span></span>
                    <span class="spn">邀请的男生<span></span></span>
                    <span class="spn">邀请的女生<span></span></span>
                </div>
                <div class="tab_one">
                    <div class="circle">
                        <div class="cir_img"><img src="./img/circle.png" alt=""></div>
                        <div class="cir_totle_con">
                            <p>累计奖励(元)</p>
                            <p>3.33</p>
                        </div>
                    </div>
                    <div class="cir_totle_money">
                        <div class="cir_totle_type">
                            <p>累计奖励(元)</p>
                            <p class="money">0.00</p>
                        </div>
                        <div class="line"></div>
                        <div class="cir_totle_type">
                            <p>充值奖励(元)</p>
                            <p class="money">0.00</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 下面内容 -->
            <div class="bottom tab_one">
                <div class="tab_type">
                    <span>邀请用户(99)</span>
                    <span><i class="line"></i> 男神奖励 <i class="line"></i></span>
                    <span>充值奖励</span>
                </div>
                <ul>
                    <li>
                        <span>雅多多</span>
                        <span>0.00</span>
                        <span>0.00</span>
                    </li>
                    <li>
                        <span>喜马拉雅多多</span>
                        <span>0.00</span>
                        <span>0.00</span>
                    </li>
                    <li>
                        <span>喜马拉雅多多</span>
                        <span>0.00</span>
                        <span>0.00</span>
                    </li>
                    <li>
                        <span>喜马拉雅多多</span>
                        <span>0.00</span>
                        <span>0.00</span>
                    </li>
                    <li>
                        <span>喜马拉雅多多</span>
                        <span>0.00</span>
                        <span>0.00</span>
                    </li>
                    <li>
                        <span>喜马拉雅多多</span>
                        <span>0.00</span>
                        <span>0.00</span>
                    </li>
                    <li>
                        <span>喜马拉雅多多</span>
                        <span>0.00</span>
                        <span>0.00</span>
                    </li>
                    <li>
                        <span>雅多多</span>
                        <span>0.00</span>
                        <span>0.00</span>
                    </li>
                    <li>
                        <span>喜马拉雅多多</span>
                        <span>0.00</span>
                        <span>0.00</span>
                    </li>
                    <li>
                        <span>喜马拉雅多多</span>
                        <span>0.00</span>
                        <span>0.00</span>
                    </li>
                    <li>
                        <span>喜马拉雅多多</span>
                        <span>0.00</span>
                        <span>0.00</span>
                    </li>
                    <li>
                        <span>喜马拉雅多多</span>
                        <span>0.00</span>
                        <span>0.00</span>
                    </li>
                    <li>
                        <span>喜马拉雅多多</span>
                        <span>0.00</span>
                        <span>0.00</span>
                    </li>
                    <li>
                        <span>喜马拉雅多多</span>
                        <span>0.00</span>
                        <span>0.00</span>
                    </li>
                </ul>
                <!-- <div class="nodata">
                        <img src="./img/nodata.png" alt="">
                       <p>暂无数据</p>
                </div> -->
            </div>
            <!-- 奖励明细内容 -->
            <div class="reward_content">
                <div class="rew_one">
                    <div>
                        <p>2019-12</p>
                        <p>本月奖励:￥3.33</p>
                    </div>
                    <div>累积奖励:￥1.03</div>
                    <div><img src="./img/rili.png" alt=""></div>
                </div>
                <ul>
                    <li>
                        <div class="left">
                            <p>邀请基金池</p>
                            <p>昨天08:30</p>
                        </div>
                        <div class="right">+1.03</div>
                    </li>
                    <li>
                        <div class="left">
                            <p>邀请基金池</p>
                            <p>昨天08:30</p>
                        </div>
                        <div class="right">+1.03</div>
                    </li>
                    <li>
                        <div class="left">
                            <p>邀请基金池</p>
                            <p>昨天08:30</p>
                        </div>
                        <div class="right">+1.03</div>
                    </li>
                    <li>
                        <div class="left">
                            <p>邀请基金池</p>
                            <p>昨天08:30</p>
                        </div>
                        <div class="right">+1.03</div>
                    </li>
                </ul>
            </div> 
        </div>
  

    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script src="./js/rem.js"></script>
    <script>
        $(document).ready(function () {
            $('.content .tab .spn').click(function () {
                $(this).children().addClass('active').parent().siblings().children().removeClass('active');
                if($(this).index()==0){
                    $('.tab_one').css({
                        display:'none'
                    })
                }else{
                    $('.tab_one').css({
                        display:'block'
                    })
                }
            })
        })

    </script>
</body>

</html>